<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clock {width:600px;height:600px;background:url("images/clock.jpg") no-repeat;position:relative;}
        .clock div {width:100%;height:100%;position:absolute;left:0;top:0}
        .h {background-image:url("images/hour.png");background-repeat:no-repeat;background-position:center;transform:rotate(0deg);}
        .m {background-image:url("images/minute.png");background-repeat:no-repeat;background-position:center;transform:rotate(0deg);}
        .s {background-image:url("images/second.png");background-repeat:no-repeat;background-position:center;transform:rotate(0deg);}
    </style>
</head>
<body>
    <div class="clock" id="clock">
        <div class="h"></div>
        <div class="m"></div>
        <div class="s"></div>
    </div>
    <script>
        var i=0;
        function clockAnimate () {
            var clock = document.getElementById('clock');
            var hPoint = clock.children[0];
            var mPoint = clock.children[1];
            var sPoint = clock.children[2];
            var date = new Date();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            var millis = date.getMilliseconds();
            h = h>12 ? h-12:h;
            var hDeg = 30*(h+(m+(s+millis/1000)/60)/60);
            var mDeg = 6*(m+(s+millis/1000)/60);
            var sDeg = 6*(s+millis/1000);
            // var sDeg = 6*s;   秒针每秒走动一次
            hDeg = hDeg+0.5*m;
            hPoint.style.transform = ' rotate('+hDeg+'deg)';
            mPoint.style.transform = ' rotate('+mDeg+'deg)';
            sPoint.style.transform = ' rotate('+sDeg+'deg)';
            // console.log(hDeg+' '+mDeg+' '+sDeg);
            // console.log((i++)+' '+sDeg);
            // console.log(s);  s每秒改变一次，当重复调用时间间隔小于一秒是，一秒内的调用结果s不改变
        }
        setInterval(clockAnimate,50);
        
        /*
        12 == 360
        (1/12) * 360
        (3/12) * 360 = 90
    1000 = 1 1=6 60 =360

        30(1/60) * 360

         距离今日0:0:0 的秒数* (1/24*60*60)*360;

         ((1/12) * 360/60)   60
         60  * ((1/12) * 360/60)
         60    (360/(12*60))

         */
    </script>
</body>
</html>